<template>
  <el-container>
    <el-aside>
      <div>
        <div class="gender" :class="index == 0 ? 'active' : ''" v-for="(g, index) in gender" style="cursor: pointer;" @click="genderClick(index, g)"> {{ g }} </div>
      </div>
    </el-aside>
    <el-main>
      <div>
        <div>作品类型</div>
        <span class="major" :class="index == 0 ? 'active' : ''" v-for="(m, index) in major" style="cursor: pointer;" @click="majorClick(index, m)"><span> </span> {{ m }} </span>
        <br>
        <br>
      </div>
      <div>
        <div>具体类型</div>
        <span class="minor" :class="index == 0 ? 'active' : ''" v-for="(mi, index) in minor" style="cursor: pointer;" @click="minorClick(index, mi)"><span> </span> {{ mi }} </span>
        <br>
        <br>
      </div>
  
      <div>
        <div>更多类型</div>
        <span class="type" :class="index == 0 ? 'active' : ''" v-for="(t, index) in type" style="cursor: pointer;" @Click="typeClick(index, t)"><span> </span> {{ t }} </span>
        <br>
      </div>
      <!-- 小说信息显示 -->
      <div>
        <div v-for="book in bookInfos">
          <book-info :bookInfo="book"></book-info>
        </div>
        <el-pagination
          @current-change="handleCurrentChange"
          v-model:currentPage="currentPage"
          :page-size="20"
          layout="prev, pager, next, jumper"
          :total="total * 20">
        </el-pagination>
      </div>
    </el-main>
  </el-container>
</template>

<script lang="ts">
import { ref, reactive, onMounted, defineComponent, watch } from 'vue'
import { requestParams, getCategory } from "@/api/axios/classify"
import { BOOK_INFOS_KEY } from "@/api/params"
import BookInfo from "@c/ranking/BookInfo.vue"
import Search from "@c/Search.vue"
import Login from "@c/navBar/Login.vue"
import serive from "@/utils/request"

export default defineComponent({
  components: {
    BookInfo,
    Search,
    Login,
  },
  setup() {
    
    const bookInfos = ref()
    const major = ref()
    const minor = ref()
    const gender = ref()
    const type = ref()
    const currentPage = ref()
    const total = ref()
    
    const handleCurrentChange = (val) => {
      // 设置当前页面
      params.currentPage = val;
      // 获取数据
      getResponse();
      // 初始化当前页面，为了更改分类时显示的是第一页
      params.currentPage = undefined;
    }
    
    // 获取数据时传入的参数
    const params = reactive({
      gender: "male",
      type: "hot",
      major: "玄幻",
      minor: undefined,
      currentPage: undefined,
    })
    
    // 异步获取 数据
    const getResponse = () => {
      getCategory(params).then(res => {
        bookInfos.value = res.data[BOOK_INFOS_KEY]
        major.value = res.data.major
        minor.value = res.data.minor
        total.value = res.data.total
      })
    }
    
    // 点击分类
    const genderClick = (index, g) => {
      activeSelect("gender", index);
      if( g === "女生") {
        params.gender = "female"
      } else if ( g === "出版物") {
        params.gender = "press"
      } else {
        params.gender = 'male'
      }
      params.major = undefined;
      params.minor = undefined;
      currentPage.value = 1;
      getResponse();
      activeSelect("major", 0)
      activeSelect("minor", 0)
    }
    
    // 点击 major 类别
    const majorClick = (index, m) => {
      // 更新 参数的 major
      params.major = m;
      // 参数的 minor 清除
      params.minor = undefined;
      
      currentPage.value = 1;
      // 更新样式
      activeSelect("major", index);
      // 获取 数据
      getResponse()
      // 更新样式
      activeSelect("minor", 0)
    }
    
    /**
     * 更新样式：添加或删除 class 属性里的 active，表示当前点击
     * @param selectClassName 根据类名查找元素
     * @param index 根据 index 更改样式，将 index 的元素 添加 active ，其他全部删除
     * 
     */
    const activeSelect = (selectClassName: string, index: number) : void => {
      let length = document.getElementsByClassName(selectClassName).length
      document.getElementsByClassName(selectClassName)[index].classList.add("active")
      for(let i = 0 ; i < length ; i++){
        if( i !== index) {
          document.getElementsByClassName(selectClassName)[i].classList.remove("active")
        }
      }
    }
    
    /**
     * 清除样式
     */
    // const activeClear = (selectClassName: string) : void => {
    //   let length = document.getElementsByClassName(selectClassName).length
    //   for(let i = 0 ; i < length ; i++){
    //     document.getElementsByClassName(selectClassName)[i].classList.remove("active")
    //   }
    // }
    
    const minorClick = (index, mi) => {
      activeSelect("minor", index);
      if(mi === "全部"){
        params.minor = undefined
      } else {
        params.minor = mi;
      }
      getResponse();
      currentPage.value = 1;
    }
    
    const typeClick = (index, t) => {
      if (t === '新书') {
        params.type = 'new'
      } else if (t === '好评') {
        params.type = "reputation"
      } else if (t === '完结') {
        params.type = "over"
      } else if (t === "VIP"){
        params.type = "monthly"
      } else {
        params.type = 'hot'
      }
      activeSelect("type", index)
      getResponse();
    }
    
    const inputClick = () => {
      // 不会显示建议
      // elAutocomplete.innerAutocomplete.activated = false;
      // 删除 display:none, 显示搜索栏
      document.querySelector('div.search').removeAttribute('style');
      // 焦点放到新搜索栏
      document.querySelector('div.searchInput>div>input').focus()
      // 给 body 添加 一个 class，为了隐藏 body 的滚动条
      document.getElementsByTagName("body")[0].classList.add("body_search_show")
    }
    
    onMounted(() => {
      getCategory().then(res => {
        bookInfos.value = res.data[BOOK_INFOS_KEY]
        major.value = res.data.major
        minor.value = res.data.minor
        gender.value = res.data.gender
        type.value = res.data.type
        total.value = res.data.total
        console.log(total.value)
      })
    })
    
    return {
      inputClick,
      bookInfos,
      major,
      minor,
      gender,
      type,
      genderClick,
      majorClick,
      minorClick,
      typeClick,
      handleCurrentChange,
      currentPage,
      total,
    }
    
  }
})
</script>

<style scoped>
.active {
  /* background-color: #E9F4F6; */
  /* background-color: #0097ff; */
  color: #0097FF;
}
.el-aside {
  width: 280px !important;
}
.el-container {
  /* min-width: 900px; */
}
.gender {
  position: relative;
  top: 15px;
}
</style>
